<template>
  <Submenu :index="data.address">
    <!-- <template slot="title">{{ data.name }}</template> -->
    <template slot="title">
      <Icon :class="data.icon"></Icon>
      <span>{{ data.name }}</span>
    </template>
    <div v-for="(child, index) in data.children" :key="index">
      <MenuItem v-if="!child.children" :index="child.address">
        <Icon :class="child.icon"></Icon>
        <span>{{ child.name }}</span>
      </MenuItem>
      <!--ReSubMenu跟name的名字保持一致，相当于循环使用该组件-->
      <ResetSubMenu v-else :data="child"></ResetSubMenu>
    </div>
  </Submenu>
</template>
<script>
import { Submenu, MenuItem, Icon } from "element-ui";
export default {
  name: "ResetSubMenu", //可以使用递归组件
  props: {
    data: {
      type: Object, //属性校验，为对象数据类型，并且如果没有赋值，默认给一个空对象
      default: () => ({})
    }
  },
  components: {
    Submenu,
    MenuItem,
    Icon
  }
};
</script>
